<template>
  <div>
    <el-row>
      <el-col :span="14">工单所需配件列表</el-col>
      <el-col
        :span="10"
        align="right"
      >
        <el-button
          type="primary"
          @click="handleDataInsert('添加配件')"
        >添加配件</el-button>
      </el-col>
    </el-row>
    <el-row v-if="workUserList.length > 0">
      <data-table
        :value="finttingData"
        :total-count="finttingData.length"
        :has-action="true"
        :table-column-attributes="finttingAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>
              配件总金额：<span>￥{{ partsSum }}</span>
            </div>
            <div>
              配件优惠金额：<span>￥{{ discountedPrice }}</span>
            </div>
            <div>
              配件折后总金额：<span>￥{{ totalAmount }}</span>
            </div>
          </div>
        </template>
        <template #action="{ row, index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"
            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectAccessories
        v-if="dialogTitle == '配件选择'"
        @partsList="changeListCheck"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from "@/components/DataTable";
import SelectAccessories from "@/components/SelectAccessories";
import { getUserOrTem } from "@/utils/index";
export default {
  components: {
    DataTable,
    SelectAccessories,
  },
  props: {
    list: {
      type: Array,
      default: () => { return [] },
    },
    showTollTypeOrworkUserId: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
      visible: false,
      dialogTitle: "",
      finttingData: [], //配件表格数据
      workUserList: [], //作业人员列表
      finttingAttributes: [
        { name: "配件编号", value: "partsCode", type: "text" },
        { name: "配件名称", value: "partsName", type: "text" },
        { name: "配件类别", value: "partsType", type: "text" },
        { name: "配件单位", value: "partsUnit", type: "text" },
        {
          name: "所需数量",
          value: "num",
          type: "inputNumber",
          maxFiled: 100,
          minFiled: 0,
        },
        { name: "内置计数", value: "internalNum", type: "inputNumber" },
        { name: "库存剩余", value: "stockNum", type: "text" },
        { name: "配件金额", value: "storagePrice", type: "text" }, //库存价
        {
          name: "折扣",
          value: "discount",
          type: "inputNumber",
          maxFiled: 10,
          minFiled: 10,
          precision: 1,
        },
        {
          name: "折后金额",
          value: "discountsAmount",
          type: "render",
          render: this.discountAmount,
        },
        {
          name: "总金额",
          value: "amount",
          type: "render",
          render: this.sumAmount,
        },
        {
          name: "状态",
          value: "status",
          type: "render",
          render: (row, value) => {
            return "未出库";
          },
          color: "color:#85ce61",
        },
        {
          name: "收费类型",
          value: "tollType",
          type: "select",
          options: [
            { index: 1, id: "自费", value: "自费" },
            { index: 2, id: "免费保养", value: "免费保养" },
            { index: 3, id: "索赔", value: "索赔" },
            { index: 4, id: "返工", value: "返工" },
            { index: 5, id: "保险", value: "保险" },
          ],
        },
        { name: "领料人员/组", value: "pickId", type: "select", options: [] }, //pickId 领料人员/班组id pickType 领料人员类型 0-人员 1-班组
      ],
      totalAmount: 0, //折后总金额
    };
  },
  watch: {
    finttingData: {
      deep: true,
      handler (newValue, oldValue) {
        this.totalAmount = 0;
        if (Array.isArray(newValue) && newValue.length > 0) {
          newValue.forEach((item, index) => {
            this.totalAmount += Number(this.discountAmount(item));
            // item.carPartsId = item.id;
          });
        }
        this.totalAmount = this.totalAmount.toFixed(2)
        this.$emit("setTotalAmount");
      },
    },
    list: {
      deep: true,
      handler (nv, ov) {
        if (Array.isArray(nv) && nv.length > 0) {
          this.finttingData = nv;
        }
      }
    },
    showTollTypeOrworkUserId (nv, ov) {
      if (!nv) {
        this.showTollTypeOrworkUserIdFun();
      }
    }
  },
  computed: {
    discountedPrice () {
      return (this.partsSum - this.totalAmount).toFixed(2)
    },
    partsSum () {
      let sum = 0;
      this.finttingData.forEach((item) => {
        if (item.num && item.num > 0) {
          let pic = item.storagePrice || 0;
          //计算
          sum += Number(pic * 1 * (item.num * 1 * item.internalNum * 1));
        }
      });

      return sum.toFixed(2);
    }, //配件总金额
  },
  methods: {
    //计算总金额
    sumAmount (row, value) {
      let pic = row.storagePrice || 0;
      return row.num ? pic * (row.num * 1 * row.internalNum * 1) : 0;
    },
    //计算折扣
    discountAmount (row, value) {
      let pic = row.storagePrice || 0;
      let internalNum = row.internalNum || 1;
      let sum = row.num ? pic * (row.num * internalNum) : 0,
        _amount = 0;
      if (row.tollType && (row.tollType == "免单" || row.tollType == "返工")) {
        _amount = 0;
      } else {
        _amount = sum;
        if (row.discount > 0) {
          _amount = sum * Number(row.discount / 10);
        }
      }
      row.shouldAmount = _amount;
      return _amount;
    },
    // getDiscount () {
    //   let discout = 0;
    //   this.finttingAttributes.forEach(item => {
    //     if (item.value === 'discount') {
    //       discout = item.maxFiled;
    //     }
    //   })
    //   return discout;
    // },
    changeListCheck (list) {
      list.map((element) => {
        this.$set(element, "stockNum", 100);//库存剩余字段  应要求  暂时写死
        this.$set(element, "discount", element.discount || 10)
        this.$set(element, "num", 1)
        this.$set(element, "tollType", '自费');
        this.$set(element, "partsType", element.partsType || element.partsDictValue);
        this.$set(element, "partsUnit", element.partsUnit || element.unit);
      });
      this.finttingData = this.finttingData.concat(list)
      this.dialogClose();
    },
    dialogClose () {
      this.visible = false;
    },
    //添加配件
    handleDataInsert () {
      this.dialogTitle = "配件选择";
      this.visible = true;
    },
    //表单删除
    delTabelData (index) {
      this.finttingData.splice(index, 1);
    },
    showTollTypeOrworkUserIdFun () {
      this.finttingAttributes = this.finttingAttributes.filter(item => {
        if (item.value !== "tollType" && item.value !== 'pickId') {
          return item
        }
      })
    }
  },
  async created () {
    this.finttingData = this.list;
    let arry = await getUserOrTem();
    this.workUserList = arry;
    this.finttingAttributes[
      this.finttingAttributes.length - 1
    ].options = this.workUserList;
    if (!this.showTollTypeOrworkUserId) {
      this.showTollTypeOrworkUserIdFun();
    }
  },
};
</script>
<style lang="scss" scoped>
</style>
